
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="applicable-device" content="mobile" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>员工疫情动态</title>
    <link rel="stylesheet" type="text/css" href="static/css/operate.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.css"/>
    	<!--elementuiCSS-->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
     
 	<script type="text/javascript" src="static/js/jquery-1.11.1.min.js"></script>
 	<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
 	<script type="text/javascript" src="static/js/echarts.min.js"></script>
 	<script type="text/javascript" src="static/app/js/china.js"></script>
 	<script type="text/javascript" src="static/js/operate.js"></script>
 	
	
    <script>
        + function() {
            remLayout();
 
            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
    </script>
    <style type="text/css">
    	.tab{
    		height: 2rem;
    		width: 100%;

    	}
    	.tab_title {
    		display: flex;
    		justify-content: space-between;
    	}
    	.tab_title p{
    		width: 50%;
    		height: 0.8rem;

    		text-align: center;
    		line-height: 0.8rem;
    		font-size: 0.36rem;
    		color: white;
    		cursor: pointer;
    	}
    	.mmss{
    		height: 0.8rem;
    		width: 5rem;
    		margin: auto;
    		
    	}
    	.mmss .el-date-editor{
    		width: 3rem;
    		height: 0.8rem;
    		margin-left:10%;
    	} 
    	.hhmm{
    		height: 0.8rem;
    		width: 5rem;
    		margin: auto;
    		
    	}
    	.hhmm .el-date-editor{
    		width: 3rem;
    		height:0.8rem;
    		margin-left:10%;
    	}
    	.show_one{
    		background-color:blue;
    	}
    	.show_two{
    		background-color:silver;
    	}
			.el-button{
				position: relative;
				display: inline-block;
				z-index: 88;
/* 				left: 1.1rem; */
			}
    	.el-input__icon{
    		display: none;
    	}
    	.el-input__inner{
    		text-align: center;
    		height: 0.8rem;
    	}
    	.button_right{
    		position: relative;
    	}
    	.button_left{
    		position: relative;
    		left: 0.1rem;
    	}
    	#left{
    		position: relative;
/*     		left: -0.4rem; */
    	}
    	#bid{
    		position: relative;
    		left: -0.4rem;
    	}
    	.iconAuto{
    		height: 0.8rem;
    		width: 0.01rem;
    	}
    	.el-icon-caret-left:before{
    		position: relative;
    		left: -0.2rem;
    	}
    	.el-icon-caret-right:before {
    position: relative;
    left: -0.1rem;
}
.hhmm .el-icon-caret-left:before {
    position: relative;
    left: -0.1rem;
}
.hhmm .el-button {
    position: relative;
    display: inline-block;
    z-index: 88;
    left: 1.1rem;
    }
    
   .mmss input[placeholder=begin]{
    	margin-left: 0.4rem;
    }
    #data{
    	overflow-x: hidden;
    }
    body{
    	overflow-x: hidden;
    }
    .auto{
    	width: 100%;
    }
    </style>
</head>
 
 
<body >
	<div id="data">
    <header>
    	<img src="static/img/header.png" width="100%"/>
    	<div class="headers">
    		<div class="text_right">
    			<span>上海地铁防疫动态</span>
    		</div>
    		<div class="text_left">
    			<span>统计截止日期</span>
    			<p id="endDate"></p>
    		</div>
    		<p class="Subheading">员工疫情动态</p>
    	</div>
    </header>
    <section  style="margin-top: 0.2rem;">
    	<ul class="ul">
    		<li>
    			<div class="sec_twos">
    				<div class="sec_two_header">
    					<img src="static/img/ico.png"/>
    					<span>线路客流实时满载率</span>
    				</div>
    				<div class="sec_x" style="margin-top: -0.1rem!important;"></div>
    				<div class="sec_out table-responsive" id="sec_three" style="overflow: auto;">
    					<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th style='text-align: center; font-size: 0.1rem;'>线路</th>
									<th style='text-align: center; font-size: 0.1rem;'>时间段</th>
									<th style='text-align: center; font-size: 0.1rem;'>平均满载率</th>
								</tr>
							</thead>
						   <tbody style='text-align: center;  font-size: 0.1rem;'>
							   	<tr>
							       <td>磁浮</td>
							       <td>0</td>
							       <td>0</td>
							     </tr>
							</tbody>
						 </table>
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="sec_two"  style="height: 7rem!important;">
    				<div class="sec_two_header">
    					<img src="static/img/ico.png"/>
    					<span>重点线路满载率变化趋势</span>
    				</div>
    				<div class="sec_x" style="margin-top: -0.1rem;"></div>
    				<div class="sec_out" id="mains_one" style="height: 6rem !important;position: relative;top: 0.4rem;">
    					<div class="tab">
    						<div class="tab_title">
    							<p class="show_one" onclick="showone();">实时</p>
    							<p class="show_two" onclick="showtwo();">历史</p>
    						</div>
    						<div class="auto">
    							<div class="mmss">
	    							<el-button class="iconAuto" icon="el-icon-caret-left button_left"></el-button>
	    							<el-time-picker
	    								:disabled=true
									    is-range
									    arrow-control
									    :clearable=false
									    v-model="value2"
									    range-separator="-"
									    start-placeholder="begin"
									    end-placeholder="end"
									    placeholder="选择时间范围" value-format="HH:mm" format="HH:mm">
									  </el-time-picker>
									 <el-button class="iconAuto" id='left' icon="el-icon-caret-right button_right"></el-button>
	    						</div>
    						</div>
    						<div class="auto">
    							<div class="hhmm" style="display: none;color:silver;">
    							<el-button class="iconAuto" icon="el-icon-caret-left"></el-button>
    							<el-date-picker
    							  :clearable=false
							      v-model="value1"
							      type="date"
							      placeholder="选择日期">
							    </el-date-picker>
							   <el-button class="iconAuto" id="bid" icon="el-icon-caret-right"></el-button>
    						</div>
    						</div>
    						
    					</div>
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="sec_two" style="height: 7rem!important;">
    				<div class="sec_two_header">
    					<img src="static/img/ico.png"/>
    					<span>区间满载率排名（TOP5）</span>
    				</div>
    				<div class="sec_x" style="margin-top: -0.1rem;"></div>
    				<div class="sec_out" id="main_two" style="height: 6rem !important;position: relative;top: 0.4rem;"></div>
    			</div>
    		</li>
    	</ul>
    </section>
    <footer>
    	
    </footer>
	</div>
    
    <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
		 <script>
    new Vue({
      el: '#data',
      data: function() {
        return {  value1: '',value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)] }
      }
    })
</script>
</body>
	<script type="text/javascript">
		function showone(){
		 	$('.hhmm').css('display','none');
		 	$('.mmss').css('display','block');
		 	$('.show_one').css('background-color','blue');
		 	$('.show_two').css('background-color','silver');
		 }
		function showtwo(){
			$('.hhmm').css('display','block');
		 	$('.mmss').css('display','none');
		 	$('.show_one').css('background-color','silver');
		 	$('.show_two').css('background-color','blue');
		}
	</script>
</html>

